<template lang="">
  <div class="evaluating">
    <div class="add-project-btn">
      <t-button
        @mouseover="handleContentMouseOver"
        v-show="btnVisible"
        @click="reactePorject"
        >创建项目</t-button
      >
    </div>
    <div
      class="content"
      @mouseover="handleContentMouseOver"
      @mouseleave="handleContentMouseLeave"
    >
      <div class="contentbox" v-show="btnVisible"></div>
      <!-- <img
        class="evaluating-img"
        :src="'http://192.168.1.217:8080/'+frdata.logo"
        alt=""
      /> -->
       <img
        class="evaluating-img"
        :src="'https://today.eapchina.net/'+frdata.logo"
        alt=""
      />

      <div class="title">
        <div style="display: flex">
          <div>{{frdata.title}}</div>
          <img
             v-show="frdata.versions==='个人'"
            class="geren"
            src="../../../static/images/evaluating/geren.png"
            alt=""
          />
          <img
           v-show="frdata.versions==='企业'"
            class="geren"
            src="../../../static/images/evaluating/qiye.png"
            alt=""
          />
        </div>

        <div class="label">
          <span style="width: 45px">主题:</span>

          <ul>
            <li v-for="(ite, index) in wer(frdata.theme)" :key="index">{{ite}}</li>
          </ul>
        </div>
        <div class="label">
          <span style="width: 45px">适用:</span>
          <ul>
            <li>{{frdata.industry===null?'全部':frdata.suit}}</li>
          </ul>
        </div>

        <div class="use">
          <div>用时：{{frdata.limit_time}}分钟</div>
          <div>{{frdata.member_num}}人</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="jsx">
import axios from "axios";
export default {
  data: () => ({
    btnVisible: false,
  }),
  props:['frdata'],

  methods: {
    handleContentMouseOver() {
      this.btnVisible = true;
    },
    handleContentMouseLeave() {
      this.btnVisible = false;
    },
    wer(hgn){
     var aa=hgn.split('#')
    
     return aa
    },
    reactePorject() {
      this.$emit("reactePorjectBulletbox");
      this.btnVisible = false;
      // this.$router.push("/evaluating/particulars");
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluating {
  position: relative;
  width: 363px;
  border-radius: 10px;
height: 120px;
  border: 2px solid rgb(151, 203, 231);

  /* .content:hover {
    background: #b4b4b4;
    opacity: 0.2;
  } */

  .add-project-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    .t-button {
      background-color: rgb(64, 149, 229);
      border-radius: 35px;
      border: 1px solid rgb(64, 149, 229);
      width: 107px;
      height: 40px;
    }
  }

  .content {
    display: flex;
    position: relative;
    .contentbox {
      position: absolute;
      width: 100%;
      height:120px;
      background-color: #333;
      border-radius: 10px;
      opacity: 0.7;
    }

    .evaluating-img {
      width: 120px;
      height: 120px;
      border-radius: 10px 0 0 10px;
    }
    .title {
      margin: 3px 16px 0 10px;
      .label {
        display: flex;
        font-size: 13px;
        margin-top: 3px;

        span {
          padding: 2px 2px;
          color: rgb(166, 178, 184);
        }
        ul {
          list-style-type: none;
          flex-wrap: wrap;
          display: flex;
          gap: 10px;
        }
        li {
          padding: 2px 8px;
          background-color: rgb(206, 229, 238);
          border-radius: 15px;
          font-size: 12px;
          justify-content: center;
        }
      }
      .use {
        display: flex;
        justify-content: space-between;
        width: 222px;
        height: 50px;
        line-height: 50px;
        color: rgb(166, 178, 184);
      }
    }
  }
}
.geren {
  width: 37px;
  height: 37px;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
